<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="">
  <meta name="format-detection" content="telephone=no">
  <meta name="full-screen" content="yes">
  <meta name="x5-page-mode" content="app">
  <meta name="x5-fullscreen" content="true">
  <meta name="browsermode" content="application">
  <meta content="" name="keywords">
  <meta content="" name="description">
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="./js/layer_mobile/need/layer.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/style.css?ver=1">
  <title>活动详情</title>
  <style>
    .proxy_wrap { padding: 15px; }
    .proxy_wrap a { display: block; width: 100%; margin-bottom: 10px; }
    .proxy_wrap img { max-width: 100%; border-radius: 3px; }
    .is_proxy { line-height: 22.7vh; width: 100%; display: block; height: 22.7vh; background: transparent url("./images/proxy_3.jpg") center / 100% no-repeat; }
    .is_proxy .proxy_img { margin-left: 20px; width: 96px; }
    .weui-loadmore_line .weui-loadmore__tips { background-color: #f2f2f2; top: -.98em; }
    .weui-loadmore { width: 75%; }
    .weui-loadmore_dot .weui-loadmore__tips { padding: 0 .27em; }
    .weui-loadmore_line { margin-top: 1.4em; }

    a[title="站长统计"] { display: none; }
  </style>
</head>

<body>
  <!-- 当前页面私有样式 -->
  <link rel="stylesheet" href="./css/detail.css?ver=1.2">

  <!-- 文章部分 -->
  <script id="article_area" type="text/html">
    <div class="rich_media_area">
      <h2 class="rich_media_title">{{ d.title }}</h2>
      <div class="rich_media_meta">
        <!-- 发布人 -->
        {{# if(d.author) { }}
        <span class="gray-color rich_media_meta_txt">{{ d.author }}</span>
        {{# } }}
        <!-- 公众号 -->
        <a href="javascript:;" class="rich_media_meta_txt" onclick='bomb("{{d.wechat_image}}")'>{{ d.extend }}</a>
        <!-- 时间 -->
        <span class="gray-color rich_media_meta_txt">{{ tools.filterTime(d.create_time, "MM月dd号") }}</span>
      </div>
  
      <!-- 文章主体内容 -->
      <div class="rich_media_content">{{ d.content }}</div>
  
      <!-- 流量两 && 点赞量 -->
      <div class="rich_media_footer clearfix">
        <span class="gray-color pull-left">阅读 {{ d.hits1 }}</span>
        <span class="theme-color pull-right {{ d.is_like==1?'active':'' }}" onclick="ilove()">
          <i class="iconfont icon-weibiaoti--copy"></i>
          好看 <span id='love-txt'>{{ d.love }}</span>
        </span>
      </div>
    </div>

    <div class="proxy_wrap">
      <!-- 申请商户 -->
      <!-- <a href="./apply.html">
        <img src="./images/apply.jpg?ver=1.0" alt="">
      </a> -->
      <!-- 申请成为商户 -->
      <a href="./apply.html?proxy_id=12">
        <img src="./images/apply.jpg" alt="我要发活动">
      </a>
    </div>
  </script>
  <div id="article">
    <!-- 骨架图 -->
    <div style="padding: 20px 16px 12px; height: 100vh; background-color: #fff;overflow: hidden;">
      <div class="gj-title"></div>
      <div class="gj-desc"></div>
      <div class="gj-cont"></div>
    </div>
  </div>


  <!-- 评论 -->
  <script id='comment_area' type="text/html">
    <div class="comment_media_area">
      {{# if(d.data.length > 0) { }}
      <!-- 有留言 -->
      <div id="commentArea" class="comment_has">
        <div class="comment_media_title clearfix">
          <span class="gray8-color pull-left">精选留言</span>
          <span class="theme-color pull-right" onclick="showMsg()">写留言</span>
        </div>
  
        <!-- 留言区域 -->
        <div class="comment_media_content">
          <div id="commentContent">
            <!-- 一级留言 -->
            {{# 
              for(var i=0; i<d.data.length; i++) {
                var item = d.data[i];
            }}
            <div class="comment_media_item clearfix">
              <!-- 左边头像 -->
              <div class="avatar pull-left">
                {{# if(item.member) { }}
                <img src="{{ item.member.avatar }}" alt="">
                {{# } else { }}
                <img src="http://money.cnskycc.com/static/AdminLTE/img/avatar.gif" alt="">
                {{# } }}
              </div>
  
              <!-- 右边内容 -->
              <div class="comment_media_meta pull-left">
                <div class="user_info clearfix">
                  <span class="gray8-color pull-left user_item">{{ item.member ? item.member.nickname : "匿名用户" }}</span>
                  <span class="theme-color pull-right user_item pri" data-id="{{item.id}}" onclick='praise(this)'>
                    {{# if(item.is_like==0) { }}
                    <i class="iconfont icon-dianzan1"></i>
                    {{# } else { }}
                    <i class="iconfont icon-dianzan"></i>
                    {{# } }}
                    <span>{{item.love}}</span>
                  </span>
                </div>
                <p class="comment_media_desc apply_btn" data-tag='{{item.member ? item.member.nickname : "匿名用户" }}' data-reply="{{item.is_repay}}" data-id='{{item.id}}' onclick='reply(this)'>{{item.content}}</p>
                {{# if(!!item.is_repay) { }}
                <!-- 作者回复 -->
                <div class="user_info clearfix author-info">
                  <span class="gray8-color pull-left author_item">作者</span>
                  <!-- <span class="theme-color pull-right user_item" data-id="{{item.id}}" onclick='praise(this)'>
                    <i class="iconfont icon-dianzan"></i>176
                  </span> -->
                </div>
                <p class="comment_media_desc">{{item.reply.content}}</p>
                {{# } }}
              </div>
            </div>
            {{# } }}
  
          <!-- 到底了 -->
          <!-- <div class="comment_media_footer"></div> -->
          <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
            <span class="weui-loadmore__tips"></span>
          </div>
        </div>
      </div>
      {{# } else { }}
      <!-- 没有留言 -->
      <div id="noComment" class="comment_nothing hide">
        <span class="theme-color" onclick="showMsg()">写留言</span>
      </div>
      {{# } }}
    </div>
  </script>
  <div id="comment_wrap"></div>

  <!-- 留言弹出框 -->
  <div class="message_area" id="message_box">
    <div class="message_mask" onclick='closeMSG()'></div>
    <div class="message_media">
      <!-- <div class="message_btns clearfix">
        <span class="btn close_btn pull-left" onclick='closeMSG()'>取消</span>
        <span class="btn sub_btn pull-right">确定</span>
      </div> -->
      <div class="message_txt">
        <textarea cols="30" rows="4" id="apply" placeholder="我想说..."></textarea>
      </div>
      <!-- <button class="btn wechat_btn" id='comment_btn' onclick="replayMsg()">提交</button> -->
      <button class="btn wechat_btn" id='comment_btn' onclick="replayMsg()">提交</button>
    </div>
  </div>

  <!--抽奖大转盘-->
  <link rel="stylesheet" href="./css/award.css">
  <style>
    .ml-main { display: none; }
    .ml-main { position: fixed; z-index: 999; top: 0; left: 0; background-color: rgba(0,0,0,.6); }
    .ml-main .kePublic, .kePublic_back { top: 50%; transform: translate3d(0,-50%,0); }
    .lottery-close-btn { position: absolute; right: 0; top: -40px; font-size: 30px; color: #fff; }
  </style>
  <div class="ml-main" id="ml-main">
    <!-- <img class="img_2_1" src="./images/lottery/img_1.png"> -->
    <div class="kePublic">
      <div style="margin:0 auto">
        <div class="banner">
          <div class="turnplate" style="background-image:url(./images/lottery/turnplate-bg_2.png);background-size:100% 100%;">
            <canvas class="item" id="wheelcanvas" width="516" height="516"></canvas>
            <img id="tupBtn" class="pointer" src="./images/lottery/turnplate-pointer_2.png" />
          </div>
        </div>
      </div>
      <i class="iconfont icon-guanbi lottery-close-btn" onclick="hideLotter()"></i>
    </div>
    <img class="kePublic_back" src="./images/lottery/back1.png">
  </div>
  
  <script type="text/javascript" src="https://s23.cnzz.com/z_stat.php?id=1277654692&web_id=1277654692"></script>
  <script src="./js/jquery-1.10.2.js"></script>
  <script src="./js/vconsole.min.js"></script>
  <script src="./js/tools2.js?ver=2.8"></script>
  <script src="./js/jweixin-1.4.0.js?ver=1.0"></script>
  <script src="./js/awardRotate.js"></script>
  <script src="./js/layer_mobile/layer.js"></script>
  <script src="./js/layer_mobile/laytpl.js"></script>
  <script>
    // var vConsole = new VConsole();
    var conf = {
      flag: false,      // true为作者回复  false为发布评论
      id: 0,            // 回复的评论id
      isReply: false,   // 是否有权限回复评论
      isPrize: false,   // 奖品是否还有库存 true有 false没有
      isGet: false,     // 是否抽取过红包  true有 false没有
      isFinish: false,  // 活动是否结束
      isover: false,    // 是否还有奖品
    };
    var acinfo = {};    // 活动信息
    var addr = {
      location: false,  // 地址获取是否成功
    };
    
    var mc_id = 0;    // 商户id
    var id = tools.getQueryString('id');
    var shareId = tools.getQueryString('shareId');
    var turnplate = {
      restaraunts: [], //大转盘奖品名称
      colors: [], //大转盘奖品区块对应背景颜色
      //fontcolors:[],				//大转盘奖品区块对应文字颜色
      outsideRadius: 222, //大转盘外圆的半径
      textRadius: 165, //大转盘奖品位置距离圆心的距离
      insideRadius: 65, //大转盘内圆的半径
      startAngle: 0, //开始角度
      bRotate: false //false:停止;ture:旋转
    };
    // var qrLocation = tools.getQueryString('location');    // 是否扫码进入
    // qrLocation = decodeURIComponent(qrLocation);    // 转换中文乱码
    var articleArea = $('#article_area').html();    // 文章渲染区域
    var commentArea = $('#comment_area').html();    // 评论渲染区域
    $(function () {
      tools.login(function() {
        getArticleDetail(renderHTML);
        getArticleComment();
        // getReplyMan();
      })

      /********抽奖开始**********/
      $('#tupBtn').click(function () {
        if (turnplate.bRotate) return;
        if(conf.isGet) {
          return layer.open({ content: "您已参与抽奖", skin: 'msg', time: 2 });
        }
        if(mc_id == 0) return;
        getPrize(function(winner) {
          turnplate.bRotate = !turnplate.bRotate;
          rotateFn(winner.id, function() {
            sendPac(winner.lid);
            conf.isGet = true;
          });
        })
      })
    });

    // 留言 / 回复留言
    function replayMsg() {
      if(conf.isFinish) {
        return layer.open({ content: '活动已结束', skin: 'msg', time: 2 });
      }
      var content = $('#apply').val();
      if(!content) {
        return layer.open({ content: '请输入评论内容', skin: 'msg', time: 2 });
      }
      var url = "";
      // var apid = 0;
      var data = {}
      if(conf.flag) {
        // 作者回复
        url = "/comment/reply";
        // apid = conf.id;
        data = {
          id: conf.id,
          content: content
        }
      } else {
        // 评论
        url = "/comment/save";
        // apid = id;
        data = {
          id: id,
          content: content
        }
      }
      tools.ajax({
        url: url,
        type: 'POST',
        data: data,
        /* data: {
          id: apid,
          content: content
        }, */
        success: function(res) {
          if(res.code == 0) {
            getArticleComment();
            var lcontent = "";
            if(conf.flag) {
              lcontent = "回复成功"
            } else {
              lcontent = "您的评论需要审核后才能显示"
            }
            layer.open({ content: lcontent, skin: 'msg', time: 2 });
          }
          closeMSG()
        }
      })
    }

    // 发红包
    function sendPac(id, type, data) {
      tools.ajax({
        url: '/redpack',
        type: 'POST',
        data: {
          lid: id, /* mid: tools.getItem('userInfo').id, */
          title: "恭喜发财", remark: acinfo.description.substr(0,20),
          type: 1, data: ""
        },
        success: function(res) {
          if(res.code === 0) {
            layer.open({ content: "红包发放成功", skin: 'msg', time: 2 });
          } else if(res.code == 1) {
            sendPac(id, 2, JSON.parse(JSON.stringify(res.data)));
          } else {
            layer.open({ content: "红包已抢完", skin: 'msg', time: 2 });
          }
        }
      })
    }

    wx.ready(function() {
      getLocation();
    })

    // 获取文章内容后的操作
    function renderHTML(res) {
      var data = res.data
      mc_id = data.mc_id;
      getPackage();   // 获取红包
      saveCustom();   // 记录有效客户
      // document.title = res.data.title;
      if(res.data.is_finish) {
        conf.isFinish = true;
        layer.open({ content: '活动已结束', skin: 'msg', time: 2 });
      }
      acinfo = data;
      laytpl(articleArea).render(data, function(html) {
        $('#article').html(html);
      })
      var imgss = getAllImg(data.content);
      conf.isReply = res.data.is_can_reply;   // 是否有权限回复评论
      previewImg(imgss);
      wx.ready(function() {
        var options = {
          title: res.data.title,
          link: location.href.replace(/code=.*\&state=.*\&?/, "") + "&shareId="+tools.getItem("userInfo").user_code + "&timestep="+Date.now(),
          desc: res.data.description,
          imgUrl: res.data.image,
          success: function(result) {
            if(addr.location) {   // 活动投放范围，不是扫码进入
              var ar = res.data.location.split(","); // 活动有效范围
              var al = ar[ar.length-1];
              // 当前位置在有效范围，并且红包没有被抽完，获取到了商户id
              if(addr.address.indexOf(al) >= 0 && conf.isover && conf.isPrize && mc_id != 0 && !conf.isGet && !conf.isFinish) {
                showLotter();
              } else {
                // layer.open({ content: '分享成功', skin: 'msg', time: 2 });
              }
            }
          }
        };
        tools.shareTimeline(options)   // 朋友圈
        tools.shareAppMessage({
          title: res.data.title,
          link: location.href.replace(/code=.*\&state=.*\&?/, "") + "&shareId="+tools.getItem("userInfo").user_code + "&timestep="+Date.now(),
          desc: res.data.description,
          imgUrl: res.data.image,
        })   // 好友
      })
    }

    // 作者回复
    function reply(self) {
      var data = $(self).data();
      // 是否回复过该评论
      if(data.reply != 0) return
      if(!conf.isReply) return
      $("#apply").attr('placeholder', '@' + data.tag);
      showMsg();
      conf.flag = true;
      conf.id = data.id
    }

    // 获取有权限回复评论
    function getReplyMan() {
      tools.ajax({
        url: "/comment/can_reply",
        data: { id: id },
        success: function(res) {
          if(res.code == 0) {
            for(var i=0; i<res.data.length; i++) {
              if(res.data[i].mid == tools.getItem('userInfo').id) {
                conf.isReply = true;
                break;
              }
            }
          }
        }
      })
    }

    // 评论点赞
    function praise(self) {
      var data = $(self).data();
      tools.ajax({
        url: '/comment/love',
        type: "POST",
        data: {
          id: data.id
        },
        success: function(res) {
          if(res.code == 0) {
            getArticleComment();
          }
        }
      })
    }

    // 点好看
    function ilove() {
      tools.ajax({
        url: '/article/like',
        data: {
          id: id
        },
        success: function(res) {
          var oLove = $('#love-txt');
          var oBox = $('.rich_media_footer span.theme-color');
          var count = Number(oLove.text());
          if(res.code == 0 && res.msg == "点赞成功") {
            oLove.text(count+=1);
            oBox.css({"font-weight": "bold"});
          } else if(res.code == 0 && res.msg == "取消点赞") {
            oLove.text(count-=1);
            oBox.css({"font-weight": "normal"});
          }
        }
      })
    }

    // 请求抽奖红包
    function getPackage() {
      tools.ajax({
        url: "/prize/list",
        data: { id: id, mc_id: mc_id },
        success: function(res) {
          if(res.code == 0) {
            conf.isGet = res.data.is_prize;
            var count = 0;
            for(var i=0; i<res.data.list.length; i++) {
              count += res.data.list[i].num;
            }
	          conf.isover = !!count;
            if(res.data.list && res.data.list.length) {
              conf.isPrize = true;
              turnplate.restaraunts = res.data.list;
              drawRouletteWheel();
            }
          } else {    // 奖品抽完 或 没有奖品
            conf.isPrize = false;
          }
        }
      })
    }

    //获取文章详情页
    function getArticleDetail(cb) {
      tools.ajax({
        url: '/article/'+id,
        success: function (res) {
          if(res.code == 0) {
            cb(res)
          } else {
            layer.open({ content: res.msg, skin: 'msg', time: 2 });    
          }
        }
      })
    }
    
    // 记录有效客户
    function saveCustom() {
      if(!!shareId) {
        tools.ajax({
          url: "/article/share",
          data: {
            id: id, mc_id: mc_id, mid: shareId
          },
          success: function(res) {
            // console.log(res)
          }
        })
      }
    }

    //获取文章评论
    function getArticleComment() {
      tools.ajax({
        url: '/comment/list_new',
        type: "POST",
        data: {
          aid: id,
          page: 1,
          limit: 100
        },
        success: function(res) {
          if(res.code == 0) {
            var arr = apsort(res.data.data)
            res.data.data = arr
            laytpl(commentArea).render(res.data, function(html) {
              $('#comment_wrap').html(html);
            })
          } else {
            laytpl(commentArea).render({ data: [] }, function(html) {
              $('#comment_wrap').html(html);
            })
          }
        }
      })
    }

    // 获取转盘中奖奖品
    function getPrize(callback) {
      tools.ajax({
        url: '/prize/start',
        data: { id: id, mc_id: mc_id },
        success: function(res) {
          if(res.code == 0) {
            var winner = res.data.yes;
            callback(winner);
          } else {
            layer.open({ content: res.msg, skin: 'msg', time: 2 });
          }
        }
      })
    }

    // 获取当前地理位置
    function getLocation() {
      wx.getLocation({
        type: 'wgs84',
        success: function (res) {
          transLocation(res.longitude, res.latitude);
        }
      });
    }

    // 调用地图接口，将坐标转换成位置信息
    function transLocation(lng, lat) {
      $.getJSON(
        "https://restapi.amap.com/v3/geocode/regeo?location="+lng+","+lat+"&key=5c34d8399b8beffa18d9b98731385bf3&radius=1000&extensions=all",
        function(res) {
          geocode(res);
        },
        function(err) {
          addr.location = false
        }
      )
    }

    // 解析地址
    function geocode(res) {
      var tag = "_";
      var address = res.regeocode.addressComponent;
      var format = address.country + tag +
                   address.province + tag + 
                   address.city + tag +
                   address.district + tag +
                   address.township;
      addr.location = true;
      addr["address"] = format;
      addr["adcode"] = address.adcode;
      addr["towncode"] = address.towncode;
    }

    // 弹出公众号二维码
    function bomb(d) {
      if(!!d) {
        layer.open({
          content: '<img src=' + d + ' /><p style="text-align:center;color:#696969;">长按识别二维码</p>'
        });
      }
    }

    /***************** 算是静态方法了 ******************/
    // 显示抽奖转盘
    function showLotter() {
      $('#ml-main').fadeIn(300)
    }

    // 隐藏抽奖转盘
    function hideLotter() {
      $('#ml-main').fadeOut(300, 'linear')
    }

    //弹出评论框
    function showMsg() {
      if(conf.isFinish) {
        return layer.open({ content: '活动已结束', skin: 'msg', time: 2 });
      }
      $('#message_box').show()
    }

    // 获取所有内容图片
    function getAllImg(content) {
      var imgs = content.match(/<img[^>]+>/g);
      imgs = !!imgs ? imgs : [];
      var arrImg = [];
      for (var j = 0; j < imgs.length; j++) {
        // 正则匹配，摘出img标签下的src里的内容
        imgs[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(
          match,
          capture
        ) {
          arrImg.push(capture);
        });
      }
      return arrImg;
    }

    // 预览图片
    function previewImg(imgs) {
      $('.rich_media_content').on('click', 'img', function(e) {
        var img = e.target.currentSrc;
        wx.previewImage({
          current: img,
          urls: imgs
        })
      })
    }

    // 关闭评论框
    function closeMSG() {
      $('#message_box').hide()
      conf.flag = false;
      conf.id = 0;
      $("#apply").attr('placeholder', "我想说...");
      $('#apply').val("");
    }
    /***************** 算是静态方法了 ******************/
    var rotateFn = function (id, callback) {
      // var item = turnplate.restaraunts.findIndex(c => c.id === id) + 1;
      var item = turnplate.restaraunts.findIndex(function(c) {
        return c.id === id
      }) + 1;
      var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
      if (angles < 270) {
        angles = 270 - angles;
      } else {
        angles = 360 - angles + 270;
      }
      $('#wheelcanvas').stopRotate();
      $('#wheelcanvas').rotate({
        angle: 0,
        animateTo: angles + 1800,
        duration: 6000,
        callback: function () {
          turnplate.bRotate = !turnplate.bRotate;
          callback();
        }
      });
    };


    function drawRouletteWheel() {
      var canvas = document.getElementById("wheelcanvas");
      if (canvas.getContext) {
        //根据奖品个数计算圆周角度
        var arc = Math.PI / (turnplate.restaraunts.length / 2);
        var ctx = canvas.getContext("2d");
        //在给定矩形内清空一个矩形
        ctx.clearRect(0, 0, 516, 516);
        //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
        ctx.strokeStyle = "#FFBE04";
        //font 属性设置或返回画布上文本内容的当前字体属性
        ctx.font = 'bold 22px Microsoft YaHei';
        for (var i = 0; i < turnplate.restaraunts.length; i++) {
          var angle = turnplate.startAngle + i * arc;
          // ctx.fillStyle = turnplate.colors[i];
          ctx.fillStyle = i%2==0?"#FBDB00" : "#FACA00";
          ctx.beginPath();
          //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
          ctx.arc(258, 258, turnplate.outsideRadius, angle, angle + arc, false);
          ctx.arc(258, 258, turnplate.insideRadius, angle + arc, angle, true);
          ctx.stroke();
          ctx.fill();
          //锁画布(为了保存之前的画布状态)
          ctx.save();

          //----绘制奖品开始----
          ctx.fillStyle = "#E83800";
          //ctx.fillStyle = turnplate.fontcolors[i];
          var text = turnplate.restaraunts[i].prize;
          var line_height = 30;
          //translate方法重新映射画布上的 (0,0) 位置
          ctx.translate(258 + Math.cos(angle + arc / 2) * turnplate.textRadius, 258 + Math.sin(angle + arc / 2) * turnplate.textRadius);

          //rotate方法旋转当前的绘图
          ctx.rotate(angle + arc / 2 + Math.PI / 2);

          /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
          if (text.indexOf("\n") > 0) { //换行
            var texts = text.split("\n");
            for (var j = 0; j < texts.length; j++) {
              ctx.font = j == 0 ? '22px Microsoft YaHei' : '22px Microsoft YaHei';
              //ctx.fillStyle = j == 0?'#FFFFFF':'#FFFFFF';
              if (j == 0) {
                //ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
                ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
              } else {
                ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
              }
            }
          } else if (text.indexOf("\n") == -1 && text.length > 6) { //奖品名称长度超过一定范围 
            text = text.substring(0, 6) + "||" + text.substring(6);
            var texts = text.split("||");
            for (var j = 0; j < texts.length; j++) {
              ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
            }
          } else {

            //在画布上绘制填色的文本。文本的默认颜色是黑色
            //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
            ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
          }

          //把当前画布返回（调整）到上一个save()状态之前 
          ctx.restore();
          //----绘制奖品结束----
        }
      }
    }

    // 评论排序
    function apsort(arr) {
      return arr.sort(function(c, p) {
        return (p.is_top - c.is_top) || (p.create_time - c.create_time);
      })
    }
  </script>
</body>

</html>